<template>
<view class="confirm-detail-header">
    <div class="confirmer">
        <view class="confirmer-left">
            <view class="left">
                <image src="@/static/logo/logo_1024.png" mode=""></image>
            </view>
            <view class="right">
                <text class="name">{{ value.realname }}</text>
                <text class="status">{{ value.status }}</text>
            </view>
        </view>
        <view class="confirm-right">
            <button class="btn" size="mini" type="primary" @click="toOrder">查看订单</button>
        </view>
    </div>
    <view class="hs-list-group">
        <view class="hs-list-item">
            <text class="field">审批编号</text>
            <text class="value">{{ value.confirm_no }}</text>
        </view>
        <view class="hs-list-item">
            <text class="field">审核内容</text>
            <text class="value">{{ value.confirm_intro }}</text>
        </view>
        <template v-if="order.news_type==8 || order.news_type==7 ">
            <view class="hs-list-item" v-if="value.bridegroom">
                <text class="field">联系姓名</text>
                <text class="value">{{ value.bridegroom }}</text>
            </view>
            <view class="hs-list-item" v-if="value.bridegroom_mobile">
                <text class="field">联系方式</text>
                <text class="value">{{ value.bridegroom_mobile }}</text>
            </view>
        </template>
        <template v-if="!['11','12','8','7'].includes(order.news_type)">
            <view class="hs-list-item" v-if="value.bridegroom">
                <text class="field">新郎姓名</text>
                <text class="value">{{ value.bridegroom }}</text>
            </view>
            <view class="hs-list-item" v-if="value.bride">
                <text class="field">新娘姓名</text>
                <text class="value">{{ value.bride }}</text>
            </view>
            <view class="hs-list-item" v-if="value.event_date">
                <text class="field">婚期</text>
                <text class="value">{{ value.event_date }}</text>
            </view>
        </template>
    </view>
</view>
</template>

<script>
export default {
    props: {
        value: {
            type: Object,
            default () {
                return [];
            }
        },
        order: {}
    },
    data() {
        return {};
    },
    methods: {
        toOrder() {
            let url = `/pages/order/detail/detail?order_id=${this.value.order_id}`;
            uni.navigateTo({
                url: url
            })
        }
    }
};
</script>

<style lang="less">
.confirm-detail-header {
    width: 100%;
    height: auto;
    background: #ffffff;

    .confirmer {
        display: flex;
        border-bottom: 1upx solid #eeeeee;

        .confirmer-left {
            display: flex;
            height: auto;
            padding: 12px 16px;
            box-sizing: border-box;

            .left {
                width: 86upx;
                height: 86upx;

                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    background: rgba(216, 216, 216, 1);
                }
            }

            .right {
                width: auto;
                padding-left: 16upx;
                box-sizing: border-box;

                text {
                    width: auto;
                    display: block;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                }

                .name {
                    font-size: 15px;
                    color: rgba(51, 51, 51, 1);
                }

                .status {
                    margin-top: 5px;
                    font-size: 14px;
                    color: rgba(153, 153, 153, 1);
                }
            }
        }

        .confirm-right {
            flex: 1;
            text-align: right;
            display: flex;
            align-items: center;

            .btn {
                margin-right: 8px;
            }

            .btn:last-child {
                margin-right: 16px;
            }
        }
    }

    .hs-list-group {
        padding: 10px 16px;

        .hs-list-item:first-child {
            margin-top: 3px;
        }

        .hs-list-item {
            display: flex;

            margin-bottom: 3px;

            .field {
                position: relative;
                flex: 0 4rem;
                text-align: justify;
                text-align-last: justify;
                font-size: 14px;
                color: rgba(51, 51, 51, 1);

                ::after {
                    content: ':';
                    position: absolute;
                }
            }

            .value {
                flex: 1;
                font-size: 13px;
                color: rgba(153, 153, 153, 1);
                text-align: left;
                padding-left: 10px;
            }
        }
    }
}
</style>
